<template>
  <form action="/">
  <van-search
    v-model="searchText"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
<van-divider content-position="left">已选标签</van-divider>
<div v-if="activeIds.length === 0">请选择标签</div>
<van-row gutter="4">
  <van-col v-for="tag in activeIds">
    <van-tag closeable size="medium" type="primary" @close="close(tag)">
    {{ tag }}
    </van-tag>
  </van-col>
</van-row>
<van-divider content-position="left">待选标签</van-divider>
<van-tree-select
  v-model:active-id="activeIds"
  v-model:main-active-index="activeIndex"
  :items="tagList"/>
  <div style="padding: 12px;">
    <van-button @click="confirmSeach" block type="primary" >搜索</van-button>
  </div>
</template>





<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
// import { showToast } from 'vant';

const router = useRouter()

const searchText = ref('');
const onSearch = () => {
  tagList.value = tagList.value.map(parentTage =>{
    parentTage.children = parentTage.children
    .filter(item => item.text.includes(searchText.value))
    return parentTage
})


}
const onCancel = () => {
  searchText.value =''
};

const confirmSeach = ()=>{
  router.push({
    path:"/search/result",
    query:{
      tags:activeIds.value
    }
  })
}

//已选择标签
const activeIds = ref([]);
const activeIndex = ref(0);
//手风琴
const tagList = ref([
  {
    text: '学历',
    children: [
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
      { text: '大四', id: '大四' },
      { text: '研一', id: '研一' },
      { text: '研二', id: '研二' },
    ],
  },
  {
    text: '方向',
    children: [
      { text: 'java', id: 'java' },
      { text: 'c++', id: 'c++' },
      { text: 'python', id: 'python' },
    ],
  },
])
//可关闭标签
    const close = (tag:string) => {
      activeIds.value = activeIds.value.filter( item => {
        return item !== tag;
      })
    };
</script>



<style scoped>

</style>